<template>
  <div class="recycle-box">
    <div class="top">
      <div class="top-left">
        <div class="top-left-title">回收站</div>
        <div class="top-left-tip">以下内容将保留30天，之后将永久删除</div>
      </div>
      <mu-button class="top-btn" @click="clearModal = true">全部清空</mu-button>
    </div>
    <mu-dialog
      width="492"
      :esc-press-close="false"
      :overlay-close="false"
      :open.sync="clearModal"
      dialog-class="recycle-custom-modal"
    >
      <div class="modal-top">
        <div class="modal-title">确认清空回收站</div>
        <img
          class="modal-close-img"
          src="https://image.xuexiwangzhe.com/Fnbsz2MJvhTRZ29k39oGf9_4Ao6c"
          @click="clearModal = false"
        />
      </div>
      <div class="modal-content">
        <div>确认清空回收站吗？</div>
        <div>清空后，文件夹和课程将永久删除。</div>
      </div>
      <div class="modal-btn-box">
        <mu-button class="modal-cancel-btn" @click="clearModal = false"
          >取消</mu-button
        >
        <mu-button class="modal-confirm-btn" @click="emptyAll"
          >确认清空</mu-button
        >
      </div>
    </mu-dialog>
    <list
      :data="data"
      v-bind="$attrs"
      v-on="$listeners"
      navActived="recycle"
    ></list>
  </div>
</template>

<script>
import list from "./list";
import { mapState } from "vuex";
export default {
  data() {
    return {
      clearModal: false,
      deleteModal: false,
      data: {
        projects: [],
        folders: [],
      },
      page: 1,
      size: 100,
    };
  },
  components: {
    list,
  },
  computed: mapState(["listReachBottom"]),
  watch: {
    listReachBottom(newVal, oldVal) {
      if (!newVal) return;
      this.getData();
    },
  },
  created() {
    this.getData();
  },
  methods: {
    // 全部清空
    emptyAll() {
      this.$axios.post("/recycle/clearAll", {}).then((res) => {
        console.log(res);
        if (res.success) {
          this.data.projects = [];
          this.data.folders = [];
          this.clearModal = false;
        }
      });
    },
    getData() {
      this.$axios
        .get("/recycle/list", {
          params: { page: this.page, size: this.size },
        })
        .then((res) => {
          if (res.success) {
            if (!this.data.folders || this.data.folders.length <= 0) {
              this.data.folders = res.data.folderVoList;
            }

            if (
              res.data.projectInfoVoPageList &&
              res.data.projectInfoVoPageList.content
            ) {
              this.data.projects = [
                ...this.data.projects,
                ...res.data.projectInfoVoPageList.content,
              ];
              this.page += 1;
            }
          }
        });
    },
  },
};
</script>

<style lang="less">
.recycle-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 38px;
  }

  .top-left {
    display: flex;
    align-items: center;
  }

  .top-left-title {
    font-size: 15px;
    color: #333;
    margin-right: 14px;
    font-weight: bold;
  }

  .top-left-tip {
    color: #999;
  }

  .top-btn {
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(102, 102, 102, 0.2);
    border-radius: 3px;
    width: 75px;
    height: 27px;
    font-size: 11px;
    color: #666666;
  }
}

.recycle-custom-modal {
  padding: 30px !important;
  box-shadow: 0px 2px 6px 0px rgba(102, 102, 102, 0.2) !important;
  border-radius: 18px !important;

  .mu-dialog-body {
    padding: 0;
  }

  .modal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
  }

  .modal-title {
    font-size: 20px;
    color: #333;
    font-weight: bold;
  }

  .modal-close-img {
    width: 14px;
    cursor: pointer;
  }

  .modal-content {
    font-size: 15px;
    color: #333;
    margin-bottom: 50px;
    text-align: left;
  }

  .modal-cancel-btn {
    width: 120px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid #666666;
    color: #666;
    font-size: 12px;
    font-weight: bold;
    margin-right: 21px;
    box-shadow: none;
  }

  .modal-confirm-btn {
    width: 120px;
    height: 30px;
    background: #ff7632;
    border-radius: 17px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    box-shadow: none;
  }

  .modal-btn-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
